<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-radio-group v-model="radio" size="medium">
          <el-radio-button :label="true">粉丝</el-radio-button>
          <el-radio-button :label="false">地图</el-radio-button>
        </el-radio-group>
        <div ref="main" style="width: 600px;height:400px;" v-show="radio"></div>
      </div>
      <Bmap v-show="!radio" />
    </el-card>
    
  </div>
</template>

<script>
import * as echarts from "echarts";
import Bmap from './component/bmap.vue';
export default {
  name: "fans",
 components:{
   Bmap
 },
  data() {
    return {
      radio: true,
      // 指定图表的配置项和数据
      option: {
        tooltip: {},
        xAxis: {
          data: ["Mon", "Tue", "Web", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {},
        series: [
          {
            name: "直接访问",
            type: "bar",
            data: [334, 52, 100, 20, 221, 390, 150]
          }
        ]
      }
    };
  },
  mounted() {
    this.echarts();
  },
  methods: {
    echarts() {
      var myChart = echarts.init(this.$refs["main"]);
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option);
    }
  }
};
</script>
<style lang="scss" scoped></style>
